/*
 * @Description: 会员中心
 * @Author: mengjiajun
 * @Date: 2023-12-15 14:39:33
 * @LastEditors: mengjiajun
 * @LastEditTime: 2024-01-02 09:20:38
 * @FilePath: \foodstuff-safety-responsibility\src\pages\User\components\MemberCenter\index.tsx
 */

import { ScrollView, View, Text } from "@tarojs/components";
import { Button, Image } from "@antmjs/vantui";
import { useState } from "react";
import IconFont from "@/components/iconfont";
import { ArrowLeft } from "@taroify/icons";
import Taro from "@tarojs/taro";

const MemberCenter: React.FC = () => {
  const memberOptions = [
    {
      label: "月度会员",
      id: 1,
      value: 30,
      info: "无赠送",
    },
    {
      label: "季度会员",
      id: 2,
      value: 90,
      info: "赠送15天",
    },
    {
      label: "年度会员",
      id: 3,
      value: 360,
      info: "赠送90天",
    },
  ];

  const [curMember, setCurMember] = useState(1);

  const privilegeOptions = [
    { id: 1, label: "整改指南" },
    { id: 2, label: "直联风险项" },
    { id: 3, label: "海量知识库" },
    { id: 4, label: "双模式升级" },
  ];

  const privilegeDetails = [
    {
      title: "特权一：收录含量同行风险，开放可查",
      options: [
        { label: "普通用户", info: "可免费查看10条同行风险数据。" },
        {
          label: "VIP用户",
          info: "收录海量同行风险和整改措施，VIP全部可看，创新引入AI指导方案。",
        },
      ],
      area: "全国通用",
    },
    {
      title: "特权二：自定义模式更适配企业实际场景",
      options: [
        {
          label: "普通用户",
          info: "系统根据用户前置业态选择，匹配同意模板。",
        },
        {
          label: "VIP用户",
          info: "满足企业个性化需求，按照实际场景，新增、删减检查内容。",
        },
      ],
      area: "全国通用",
    },
    {
      title: "特权三：检查项可直联风险和整改措施",
      options: [
        {
          label: "普通用户",
          info: "填报页面内暂无法匹配风险和整改措施匹配查看。",
        },
        {
          label: "VIP用户",
          info: "检查页面直接可看同行风险和对应整改措施，比海淘资料更便捷。",
        },
      ],
      area: "全国通用",
    },
    {
      title: "特权四：智能模式节省99%用户操作时间",
      options: [
        {
          label: "普通用户",
          info: "",
          infoList: [
            "员工需每日重复填报",
            "1、选择填报人",
            "2、填写每一项检查项",
            "3、检查人签名",
            "4、点击提交",
          ],
        },
        {
          label: "VIP用户",
          info: "只需配置一次规则，智能模式根据设置形成预览，提交前支持修改，节省重复操作时间，同时后台支持定时提交，避免遗漏。",
        },
      ],
      area: "部分地区",
    },
    {
      title: "特权五：记忆功能可“消除”重复步骤",
      options: [
        {
          label: "普通用户",
          info: "需要重复填写，节假日免报备也需依次提交，没有参考历史数据功能。",
        },
        {
          label: "VIP用户",
          info: "系统根据企业配置的规则，批量操作、引用历史数据，智能“消除”重复填报、重复提交步骤。",
        },
      ],
      area: "部分地区",
    },
  ];

  const createPrivilegeDom = (options: {
    title: string;
    options: {
      label: string;
      info: string;
      infoList?: string[];
    }[];
    area: string;
  }) => {
    return (
      <View className="flex flex-col w-full gap-4">
        <View className="flex items-center">
          <Text className=" text-center rounded text-[20px] bg-[#ecb56d] text-white mr-1">
            {options.area}
          </Text>
          <Text className="text-[#ecb56d]">{options.title}</Text>
        </View>

        <View className="flex w-full gap-4">
          {options.options.map((_item, _index) => (
            <View
              key={_index}
              className="flex flex-col w-1/2 rounded"
              style={{
                backgroundColor:
                  _item.label === "普通用户" ? "#c4d3dd" : "#efded0",
              }}
            >
              <View
                className=" w-full leading-[60px] px-3 py-1"
                style={{
                  borderRadius: "4px 4px 0 0",
                  color: _item.label === "普通用户" ? "white" : "rgb(46,33,22)",
                  backgroundColor:
                    _item.label === "普通用户" ? "#293238" : "#d3a682",
                }}
              >
                <Text>{_item.label}</Text>
              </View>
              <View
                className="flex-1 p-3"
                style={{
                  color:
                    _item.label === "普通用户" ? "#58626b" : "rgb(46,33,22)",
                }}
              >
                {_item.infoList ? (
                  <>
                    {_item.infoList.map((_text, _tIndex) => (
                      <View key={_tIndex}>{_text}</View>
                    ))}
                  </>
                ) : (
                  <Text>{_item.info}</Text>
                )}
              </View>
            </View>
          ))}
        </View>
      </View>
    );
  };

  return (
    <View className="bg-[#4d4d4d]">
      <View className="h-[60px] "></View>
      <View className="h-[140px] px-3 flex justify-between items-center">
        <ArrowLeft
          color="white"
          onClick={() => {
            Taro.navigateBack();
          }}
        />
        <Text className="text-white">会员中心</Text>
        <View></View>
      </View>
      <View className="flex items-center gap-2 px-3 py-2 text-white">
        <Image
          round
          width="60px"
          height="60px"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <View className="flex flex-col justify-center flex-1 gap-2">
          <Text>测试账号</Text>
          <Text>[测试服务] 许可证号</Text>
          <View>
            <Button type="primary" size="mini">
              您当前暂未开通VIP服务
            </Button>
          </View>
        </View>
      </View>

      <View
        className="p-3 bg-white "
        style={{
          borderRadius: "8px 8px 0 0 ",
        }}
      >
        <View className="flex gap-1 pb-6">
          {memberOptions.map((_item) => (
            <View
              key={_item.id}
              className="flex flex-col items-center w-1/3 gap-2 p-2 rounded"
              style={{
                backgroundColor: curMember === _item.id ? "#ecb56d" : "#e2e2e2",
              }}
              onClick={() => setCurMember(_item.id)}
            >
              <Text>{_item.label}</Text>
              <Text className="text-[20px] text-red-600">
                ￥<Text className="text-[32px] font-bold">{_item.value}</Text>
              </Text>
              <Text
                className="w-full py-1 text-center rounded"
                style={{
                  backgroundColor:
                    curMember === _item.id ? "rgb(46,33,22)" : "#ecb56d",
                  color: curMember === _item.id ? "#ecb56d" : "rgb(46,33,22)",
                }}
              >
                {_item.info}
              </Text>
            </View>
          ))}
        </View>

        <View className="flex flex-col gap-2">
          <Text className="font-semibold text-[32px]">支付方式</Text>
          <Button type="default" block color="#e2e2e2">
            微信支付
          </Button>
          <Button type="primary" block color="rgb(220,38,38)">
            立即开通
          </Button>

          <Text className="text-[24px] w-full text-center">
            开通前请阅读
            <Text className="text-[#1677ff]">《会员服务协议》</Text>
            ,购买即视为您已同意。
          </Text>
        </View>
      </View>

      <View className="flex flex-col w-full gap-4 p-3 mt-4 bg-white">
        <Text className="w-full text-center text-[32px] text-[#ecb56d]">
          尊享特权
        </Text>

        <View className="flex gap-1">
          {privilegeOptions.map((_item) => (
            <View
              key={_item.id}
              className="flex flex-col w-1/4 gap-2 p-2 bg-[#d3a682] rounded justify-evenly items-center"
            >
              <IconFont name="order" size={48} color="#ecb56d" />
              <Text className="text-[20px]">{_item.label}</Text>
            </View>
          ))}
        </View>

        <View className="flex flex-col gap-4">
          {privilegeDetails.map((_item) => createPrivilegeDom(_item))}
        </View>

        <View>
          <View className="text-[32px] font-semibold">标签说明：</View>
          <View className="text-[#58626b]">
            全国通用代表全国有“智能”标记的模板地区通用，部分地区代表仅对已引入监管要求在线模板的地区开放。
          </View>
        </View>
      </View>
    </View>
  );
};

export default MemberCenter;
